﻿<UserControl x:Class="Indigo.Quibbler.Controls.ListPagerGridControl"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    Width="Auto" Height="Auto" 
    xmlns:lp="clr-namespace:Indigo.Quibbler.Controls">
    <UserControl.Resources>
        <lp:UIListPager x:Key="listPager" PageSize="12" />
        <lp:CurrentPageDisplayIndexConverter x:Key="CurrentPageDisplayIndex"/>
 
        <ItemsPanelTemplate x:Key="ListBoxWrapPanelTemplate">
            <WrapPanel Margin="10,10,10,10" MaxWidth="{Binding ElementName=lstBox,Path=ActualWidth}" VerticalAlignment="Center" HorizontalAlignment="Center" >
            </WrapPanel>
        </ItemsPanelTemplate>

        <Style x:Key="SimpleListBoxItem" TargetType="ListBoxItem">
            <Setter Property="FocusVisualStyle" Value="{x:Null}" />
            <Setter Property="Template">
                <Setter.Value>
                    <ControlTemplate TargetType="ListBoxItem">
                        <ControlTemplate.Resources>
                            <Storyboard x:Key="OnMouseEnter">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="1.1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="1.1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                            <Storyboard x:Key="OnMouseLeave">
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleX)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                                <DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="Bd" Storyboard.TargetProperty="(UIElement.RenderTransform).(TransformGroup.Children)[0].(ScaleTransform.ScaleY)">
                                    <SplineDoubleKeyFrame KeyTime="00:00:00" Value="1.1"/>
                                    <SplineDoubleKeyFrame KeyTime="00:00:00.3" Value="1"/>
                                </DoubleAnimationUsingKeyFrames>
                            </Storyboard>
                        </ControlTemplate.Resources>
                        <Border x:Name="Bd" SnapsToDevicePixels="True" Background="{TemplateBinding Background}" BorderBrush="Black" BorderThickness="0" Padding="0"  CornerRadius="2" RenderTransformOrigin="0.5,0.5" Width="240" Height="200" Margin="0,20,20,0" Cursor="Hand">
                            <Border.RenderTransform>
                                <TransformGroup>
                                    <ScaleTransform/>
                                    <SkewTransform/>
                                    <RotateTransform/>
                                    <TranslateTransform/>
                                </TransformGroup>
                            </Border.RenderTransform>
                            <ContentPresenter/>
                        </Border>
                        <ControlTemplate.Triggers>
                            <Trigger Property="IsSelected" Value="True">
                                <Setter Property="Panel.ZIndex" Value="0"/>
                                <Setter TargetName="Bd" Property="Background" Value="#00000000"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="True">
                                <Setter Property="Panel.ZIndex" Value="1000"/>
                            </Trigger>
                            <Trigger Property="IsMouseOver" Value="False">
                                <Setter Property="Panel.ZIndex" Value="0"/>
                            </Trigger>
                            <EventTrigger RoutedEvent="Mouse.MouseEnter">
                                <BeginStoryboard Storyboard="{StaticResource OnMouseEnter}"/>
                            </EventTrigger>
                            <EventTrigger RoutedEvent="Mouse.MouseLeave">
                                <BeginStoryboard Storyboard="{StaticResource OnMouseLeave}"/>
                            </EventTrigger>
                        </ControlTemplate.Triggers>
                    </ControlTemplate>
                </Setter.Value>
            </Setter>
        </Style>

    </UserControl.Resources>

    <Grid>
        <Grid.ColumnDefinitions>
            <ColumnDefinition Width="40"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="*"/>
            <ColumnDefinition Width="20"/>
            <ColumnDefinition Width="40"/>
        </Grid.ColumnDefinitions>
    
        <Button x:Name="prevBtn" Content="&lt;" FontWeight="Bold" FontSize="16" Margin="10,0,0,0" Grid.Column="0" Height="60" Click="prevBtn_Click"/>
        <Grid DataContext="{StaticResource listPager}" Grid.Column="2" VerticalAlignment="Stretch" HorizontalAlignment="Stretch">
            <ListBox ItemContainerStyle="{StaticResource SimpleListBoxItem}" ItemsSource="{Binding CurrentPage}" x:Name="lstBox" ItemsPanel="{StaticResource ListBoxWrapPanelTemplate}" ScrollViewer.HorizontalScrollBarVisibility="Hidden" ScrollViewer.VerticalScrollBarVisibility="Hidden" BorderBrush="Transparent" Background="{x:Null}"/>
        </Grid>
        <Button x:Name="nextBtn" Content="&gt;" FontWeight="Bold" FontSize="16" Margin="0,0,10,0" Height="60" Grid.Column="4" Click="nextBtn_Click"/>
    </Grid>
</UserControl>
